<template>
  <div class="main-section">
    <div class="forum-secton">
      <luo-forum-bar
        v-for="item in articles"
        :article="item"
        :key="item.article_id"
        @change="searchArticle"
        @select-consumer="showConsumerInfo"
      ></luo-forum-bar>
      <div
        :class="{ 'bj-detail-body': isShowDetail }"
        @click.self="toggleDetail"
      >
        <!-- 详细信息 -->
        <consumer-detail :userId="showId" v-if="isShowDetail"></consumer-detail>
      </div>

      <!-- 发布文章 -->
      <div
        :class="{ 'bj-detail-body': isShowAdd }"
        @click.self="toggleUploadForm"
      >
        <div class="load-section" v-show="isShowAdd">
          <el-form :model="form" label-width="120px" class="form">
            <el-form-item class="eitem" label="文章标题">
              <el-input v-model="form.article_title" />
            </el-form-item>
            <el-form-item class="eitem" label="文章总结">
              <el-input v-model="form.article_summary" />
            </el-form-item>
            <el-form-item class="eitem" label="文章内容">
              <el-input v-model="form.article_description" />
            </el-form-item>
            <el-form-item class="eitem" label="上传文件">
              <el-upload
                ref="uploadRef"
                class="upload-demo"
                action="http://localhost:8888/article/add"
                :auto-upload="false"
                :data="params"
                :on-success="handleSuccess"
              >
                <template #trigger>
                  <el-button type="" text bg class="xuantu">选择图片</el-button>
                </template>
                <el-button
                  type="success"
                  text
                  @click="submitUpload"
                  class="fawen"
                >
                  发布文章
                </el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 预约form -->
      <div
        :class="{ 'bj-detail-body': isShowApply }"
        @click.self="toggleApplyForm"
      >
        <div class="load-section" v-show="isShowApply">
          <el-form :model="addForm" label-width="150px" class="form">
            <el-form-item class="eitem" label="活动名">
              <el-input v-model="addForm.show_title" />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="addForm.date"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:MM"
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item class="eitem" label="演出者">
              <el-input v-model="addForm.actor" />
            </el-form-item>
            <el-form-item class="eitem" label="演出地点">
              <el-input v-model="addForm.show_location" />
            </el-form-item>
            <el-form-item class="eitem" label="演出介绍">
              <el-input v-model="addForm.show_description" />
            </el-form-item>
            <el-form-item class="eitem" label="演出宣传图片">
              <el-upload
                ref="uploadRef2"
                class="upload-demo"
                action="http://localhost:8888/show/add"
                :auto-upload="false"
                :data="applyInfo"
                :on-success="handleApplySuccess"
              >
                <template #trigger>
                  <el-button type="primary" class="xuantu2">选择图片</el-button>
                </template>
                <el-button
                  class="ml-3"
                  type="success"
                  @click="submitUploadApply"
                >
                  提交申请
                </el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 边框 -->
    <div class="side-bar">
      <div class="search">
        <el-input
          class="search-bar"
          placeholder="搜索感兴趣的文章"
          :prefix-icon="Search"
          v-model="keywords"
          @keyup.enter="goSearch()"
        />
      </div>
      <div class="container">
        <div class="calander">
          <div class="upper-panel">
            <h4 class="date-year"></h4>
          </div>
          <div class="main-panel">
            <h1 class="day-number"></h1>
          </div>
        </div>
      </div>
      <button class="button1" @click="searchSuchArticle">
        <span>查看我的关注</span>
      </button>
      <button class="button1" @click="showUploadForm">
        <span>发布文章</span>
      </button>
      <button class="button1" @click="showApplyForm">
        <span>申请演出</span>
      </button>
      <div class="cards">
        <div class="card red">
          <p class="tip">Hover Me</p>
          <p class="second-text">FOLLOW ME MY BROO</p>
        </div>
        <div class="card white">
          <p class="tip">Hover Me</p>
          <p class="second-text">FOLLOW ME MY BROO</p>
        </div>
        <div class="card blue">
          <p class="tip">Hover Me</p>
          <p class="second-text">FOLLOW ME MY BROO</p>
        </div>
      </div>
    </div>
  </div>

  <el-dialog title="标题" :visiblec="true" width="720px">
    <p>弹窗内容</p>
  </el-dialog>

  <!-- 输入框 -->
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
import LuoForumBar from "@/views/forum/LuoForumBar.vue";
import { Search } from "@element-plus/icons-vue";
import ConsumerDetail from "@/views/forum/ConsumerDetail.vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";

export default defineComponent({
  components: {
    LuoForumBar,
    ConsumerDetail,
  },
  setup() {
    const keywords = ref("");
    const articles = ref([]);
    const { proxy } = getCurrentInstance();
    const form = reactive({
      article_summary: "",
      article_title: "",
      article_description: "",
    });

    const uploadRef = ref();
    const uploadRef2 = ref();
    const store = useStore();
    const isShowAdd = ref(false);
    const isShowApply = ref(false);
    const isShowDetail = ref(false);

    const params = {
      article_user: store.getters.userId,
      article_title: form.article_title,
      like_count: "0",
      read_count: "0",
      top_flag: "1",
      article_summary: form.article_summary,
      content_html: "0",
      article_description: form.article_description,
    };

    const submitUpload = () => {
      console.log(uploadRef.value);
      if (!store.getters.token) {
        (proxy as any).$message({
          message: "请先登录",
        });
        return;
      }
      (params.article_user = String(store.getters.userId)),
        (params.article_title = form.article_title),
        (params.like_count = "0"),
        (params.read_count = "0"),
        (params.top_flag = "1"),
        (params.article_summary = form.article_summary),
        (params.content_html = "0"),
        (params.article_description = form.article_description),
        uploadRef.value.submit();
      searchArticle();
    };

    //提交预约
    const addForm = reactive({
      date: [],
      show_title: "",
      actor: "",
      show_location: "",
      show_description: "",
    });
    const applyInfo = {
      show_date: "",
      end_date: "",
      show_title: "",
      show_like_count: "",
      show_user: proxy.$store.getters.userId,
      show_location: "",
      show_description: "",
      actor: "",
    };
    const submitUploadApply = () => {
      console.log(uploadRef2.value);
      if (!store.getters.token) {
        (proxy as any).$message({
          message: "请先登录",
        });
        return;
      }
      applyInfo.show_date = addForm.date[0] + ":00";
      applyInfo.end_date = addForm.date[1] + ":00";
      applyInfo.show_title = addForm.show_title;
      applyInfo.show_like_count = "0";
      applyInfo.show_user = proxy.$store.getters.userId;
      applyInfo.show_location = addForm.show_location;
      applyInfo.show_description = addForm.show_description;
      applyInfo.actor = addForm.actor;
      console.log(applyInfo);
      uploadRef2.value.submit();
    };

    async function handleSuccess(res) {
      (proxy as any).$message({
        message: res.message,
        type: res.type,
      });

      if (res.success) {
        (form.article_summary = ""),
          (form.article_title = ""),
          (form.article_description = ""),
          await searchArticle();
      }
    }
    //处理发布预约

    async function handleApplySuccess(res) {
      (proxy as any).$message({
        message: res.message,
        type: res.type,
      });

      if (res.success) {
        (form.article_summary = ""),
          (form.article_title = ""),
          (form.article_description = ""),
          await searchArticle();
      }
    }

    //获取文章
    async function searchArticle(value = "") {
      const params =
        value == ""
          ? {}
          : {
              article_title: value,
            };
      const result = (await HttpManager.searchArticle(params)) as ResponseBody;
      articles.value = result.data;
    }
    function goSearch() {
      searchArticle(keywords.value);
    }
    //获取关注者文章
    async function searchSuchArticle() {
      const result = (await HttpManager.getSuchArticle(
        proxy.$store.getters.userId
      )) as ResponseBody;
      articles.value = result.data;
    }

    //当加载时，首先搜索一次
    onMounted(() => {
      searchArticle();
    });

    onMounted(() => {
      // gets access to .date-year tag in html
      const dateYear = document.querySelector(".date-year");
      // gets access to .day-number tag in html
      const dayNumber = document.querySelector(".day-number");
      // gets access to date
      let date = new Date();
      // gets access to day number
      let day = date.getDate();
      // gets holds months in word form
      let months = [
        "January",
        "Febuary",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ];
      // gets month word in 'months' array and passes a number to it matching to the month
      let monthName = months[date.getMonth()];
      // gets access to the year
      let year = date.getFullYear();
      // sets the html of the tags using our variables above
      dateYear.innerHTML = monthName + " " + year;
      dayNumber.innerHTML = String(day);
    });
    function showUploadForm() {
      isShowAdd.value = true;
    }
    function showApplyForm() {
      isShowApply.value = true;
    }
    function toggleUploadForm() {
      isShowAdd.value = false;
    }
    function toggleApplyForm() {
      isShowApply.value = false;
    }
    function toggleDetail() {
      isShowDetail.value = false;
    }

    const showId = ref("");
    //显示个人信息
    function showConsumerInfo(id) {
      showId.value = id;
      isShowDetail.value = true;
    }

    function closeDetail() {
      console.log("要关了");
      isShowDetail.value = false;
    }
    return {
      showId,
      isShowDetail,
      applyInfo,
      addForm,
      isShowApply,
      isShowAdd,
      articles,
      keywords,
      form,
      uploadRef,
      uploadRef2,
      params,
      Search,
      handleSuccess,
      toggleApplyForm,
      toggleUploadForm,
      searchArticle,
      goSearch,
      submitUpload,
      handleApplySuccess,
      submitUploadApply,
      showConsumerInfo,
      closeDetail,
      toggleDetail,
      showUploadForm,
      showApplyForm,
      searchSuchArticle,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/addArticle.scss";
@import "@/assets/css/forum.scss";
</style>
